<template>
  <div>
    <div class="father">
      <!-- 头我的地址 -->
      <div class="titles">
        <van-nav-bar title="我的地址">
          <template #left>
            <van-icon name="arrow-left" size="18" @click="$router.go(-1)"/>
          </template>
          <template #right>
            <p @click="$router.push('address')">新增地址</p>
          </template>
        </van-nav-bar>
      </div>
      <!-- 中间添加服务地址 -->
      <div class="centers" v-if="address">
        <van-empty 
        image-size="260px"
        >
          <h3>您还没有服务地址哦</h3>
          <van-button 
          :color="`linear-gradient(to right, ${$store.state.primary_color_1}, ${$store.state.primary_color_2})`"
          class="bottom-button"
          >添加服务地址</van-button>
        </van-empty>
      </div>
      <!-- 中间显示地址部分 -->
      <div class="centerse" v-else>
        <div>
          <div>
            <p>重庆如家酒店</p>
            <span>谢13512345678</span>
          </div>

          <van-icon name="arrow" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        address: true
      }
    },
  }
</script>

<style lang="scss" scoped>
.father{
  height: 100vh;
  background-color: #f7f7f7;
  // 头部css样式
  .titles{
    .van-icon{
      border: 1px solid #888;
      border-radius: 50%;
      padding: 1px;
      color: #888;
      &:active{
        opacity: 0.4;
      }
    }
  }
  // 中间添加服务地址css样式
  .centers{
    h3{
      color: #444;
    }
    .bottom-button{
      width: 168px;
      height: 40px;
      line-height: 40px;
      font-size: 17px;
      color: #fff;
      border: none;
      border-radius: 6px;
      margin-top: 20px;
    }
  }
  //中间显示地址部分css样式
  .centerse{
    background-color: white;
    padding:0 16px;
    border-top: 1px solid #eee;
    div{
      display: flex;
      justify-content: space-between;
      align-items: center;
      div{
        display: flex;
        align-items: start;
        flex-direction: column;
        p{
          padding: 16px 0 10px 0;
        }
        span{
          margin-bottom: 10px;
          font-size: 14px;
          color: #888;
        }
      }
    }
  }
}
</style>
